<template>
  <f7-page>
    <qm-currentcy-navbar title="机关资讯">
    </qm-currentcy-navbar>
    <template slot="fixed">
      <qm-toolbar></qm-toolbar>
    </template>
    <f7-block class="classify">
      <van-tabs
        line-width="15px"
        line-height="3px"
        title-active-color="#0F1826"
        title-inactive-color="#61677A"
        color="#3385FF"
      >
        <van-tab
          v-for="(item, i) in tabs"
          :key="i"
          :title="item"
        >
          <f7-block class="consult-wrapper">
            <qm-consult-list v-for="(item, i) in consults" :key="i" :data="item" reverse></qm-consult-list>
          </f7-block>
        </van-tab>
      </van-tabs>
    </f7-block>
  </f7-page>
</template>

<script>
import { Tab, Tabs } from "vant"
export default {
  name: "agency-information",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      tabs: ["生活播报", "今日动态", "部门动态"],
      consults: [
        { title: "新时代机关新风采", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") },
        { title: "疫情防控不放松 个人防护第一位 进一步做好预防", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") },
        { title: "天津市滨海新区13项指标成为全国标杆", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") },
        { title: "杭州出台全国首个省会城市不动产登记地方政府规章杭州出台全国首个省会城市", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.classify {
  margin: 0;
  padding: 0;
  // border: 1px solid var(--color-divider-background);
}
.consult-wrapper {
  margin: 0;
  padding: 0 calc(32px * var(--ratio));
}

::v-deep .navbar-bg {
  &::before {
    content: none;
  }
}
::v-deep .navbar-inner {
  background-color: #fff;
}

::v-deep .page-content {
  padding-top: calc(88px * var(--ratio))
}

::v-deep{
  .van-tab {
    font-size: var(--font-size-subcontent);

    &.van-tab--active {
      font-size: var(--font-size-subtitle);
    }
  }

  .van-tabs__wrap {
    border-bottom: 1px solid var(--color-divider-background);
  }
  }
</style>